import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:provider/provider.dart';
import '../stores/chat_store.dart';
import './chat_list_screen.dart';

// 首页屏幕 - 包含底部导航栏
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 获取ChatStore实例
    final chatStore = Provider.of<ChatStore>(context);

    // 底部导航对应的页面列表
    final List<Widget> _pages = [
      const ChatListScreen(),
      const Center(child: Text('联系人')), // 占位页面，实际应用中替换为真实页面
      const Center(child: Text('发现')), // 占位页面，实际应用中替换为真实页面
      const Center(child: Text('我的')), // 占位页面，实际应用中替换为真实页面
    ];

    return Observer(
      builder: (_) => Scaffold(
        // 根据当前选中的导航索引显示对应页面
        body: _pages[chatStore.currentBottomNavIndex],
        // 底部导航栏
        bottomNavigationBar: BottomNavigationBar(
          // 当前选中的索引
          currentIndex: chatStore.currentBottomNavIndex,
          // 点击导航项时的回调
          onTap: (index) => chatStore.setBottomNavIndex(index),
          // 底部导航类型 - 固定
          type: BottomNavigationBarType.fixed,
          // 导航项列表
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.chat), label: '聊天'),
            BottomNavigationBarItem(
              icon: Icon(Icons.contact_page),
              label: '联系人',
            ),
            BottomNavigationBarItem(icon: Icon(Icons.explore), label: '发现'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
          ],
        ),
      ),
    );
  }
}
